@use "../core/color";
@use "../core/layout";
@use "../core/typography";

// Components: Form
// ============================================================================

// Rules
// ----------------------------------------------------------------------------

// Standard layout for forms
// -------------------------
// Specs: https://goo.gl/pEV9E1

// Backdrop which appears behind forms during inline editing
.form__backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: layout.$zindex-modal-backdrop;

  background-color: color.$white;
  opacity: 0.5;
}

// Error message displayed if AJAX form submission fails for reasons other than
// a validation error. When there is a validation error, the response is updated
// markup for the form which replaces the original.
.form__submit-error {
  color: color.$brand;
  display: none;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;

  &.is-visible {
    display: block;
  }
}

.form.is-editing > .form__backdrop {
  display: block;
}

.form-header {
  margin-top: 55px;
  margin-bottom: 30px;

  color: color.$grey-6;
  font-weight: normal;
  font-size: typography.$title-font-size;
}

.form-header--center {
  margin-top: 30px;
  margin-bottom: 40px;
  text-align: center;
}

.form-header__logo {
  color: color.$grey-6;
  margin-left: 5px;
  vertical-align: middle;
}

.form-description {
  @include typography.font-big;

  margin-bottom: 30px;

  color: color.$grey-5;
}

/**
 * A footer which appears between form fields and the form's action buttons.
 *
 * Unlike "form-footer" which appears below the form, use this for things you
 * want the user to read before they submit the form.
 */
.form-presubmit-footer {
  @include typography.font-small;

  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;

  color: color.$grey-4;
}

@mixin form-footer {
  @include typography.font-normal;
  color: color.$grey-5;
}

.form-footer {
  @include form-footer;

  margin-top: 80px;

  border-top: 1px solid color.$grey-3;
  padding-top: 15px;
}

// The "popup" variation of the form footer is designed to be used outside of a
// "form-container" and appear at the bottom of a popup window, spanning its
// full width.
.form-footer--popup {
  @include form-footer;

  position: fixed;
  bottom: 25px;
  left: 0;
  right: 0;
  height: 25px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-top: 1px solid color.$grey-3;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

// A form footer with no top border, useful for additional sections at the
// bottom of a footer.
.form-footer--no-border {
  @include form-footer;

  margin-top: 15px;
}

.form-help-text {
  color: color.$grey-5;
}

.form-footer__required {
  display: flex;
  justify-content: flex-end;
}

.form-footer__symbol {
  color: color.$brand;
  margin-right: 3px;
}
